<template>
	<view class="form-wrap">
		<uni-forms ref="form" :modelValue="myValue" validate-trigger="bind">
			<view
				v-for="(item, index) in formData"
				:key="index"
				class="pt-10 pb-8"
				:class="{ 'mx-16': !item.gutter, 'gutter-bottom px-16': item.gutter, 'border-bottom': !item.gutter && index + 1 != formData.length }"
			>
				<uni-forms-item :name="item.name" :rules="item.rules" v-if="isEmpty(item.show) || item.show != false">
					<view :class="{ 'flex align-center': !item.labelFullRow }">
						<!-- label表单标题 -->
						<view :class="[item.labelClass, { 'mb-5': item.labelFullRow }]">
							<text class="error" v-if="item.rules && item.rules.length >= 1">*</text>
							{{ item.label }}
						</view>
						<view class="flex-1">
							<!-- 普通输入框 -->
							<view v-if="item.type == 'input'" class="forms-input-style"><form-input v-model="item.values" :data="item"></form-input></view>
							<!-- 文本域输入框 -->
							<form-textarea v-if="item.type == 'textarea'" v-model="item.values" :data="item"></form-textarea>
							<!-- 分类选择 -->
							<form-cascader v-if="item.type == 'cascader'" v-model="item.values" :data="item"></form-cascader>
							<!-- 上传 -->
							<form-upload v-if="item.type == 'upload'" v-model="item.values" :data="item"></form-upload>
							<!-- 数字 -->
							<form-number v-if="item.type == 'number'" v-model="item.values" :data="item"></form-number>
							<!-- Switch开关 -->
							<form-switch v-if="item.type == 'switch'" v-model="item.values" :data="item"></form-switch>
							<!-- 日期区间 -->
							<form-date-range v-if="item.type == 'dateRange'" v-model="item.values" :data="item"></form-date-range>
							<!-- 项目新客专享价 -->
							<form-new-member-price v-if="item.type == 'newMemberPrice'" v-model="item.values" :data="item"></form-new-member-price>
							<!-- 项目预约设置 -->
							<form-goods-reservation v-if="item.type == 'goodsReservation'" v-model="item.values" :data="item"></form-goods-reservation>
							<!-- 选择门店 -->
							<form-choose-merchant v-if="item.type == 'chooseMerchant'" v-model="item.values" :data="item"></form-choose-merchant>
						</view>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>
	</view>
	<div class="bottom-bar">
		<div class="bototm-box"><my-button type="primary" shape="circle" @click="submit" :loading="loading" :disabled="loading">保存并提交</my-button></div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { isEmpty } from '@/assets/js/utils'
import FormNewMemberPrice from '@/components/form/goods/form-new-member-price.vue'
import FormGoodsReservation from '@/components/form/goods/form-goods-reservation.vue'
import FormChooseMerchant from '@/components/form/merchant/form-choose-merchant.vue'

const props = defineProps({
	formData: {
		type: Object,
		required: true
	},
	loading: {
		type: Boolean,
		default: false
	}
})

const myValue = ref({})
const emit = defineEmits(['change', 'submit'])
//表单值发生变化
watch(myValue.value, newValue => {
	emit('change', newValue)
})

//监听调用页面传递的回显值发生变化
watch(
	() => JSON.parse(JSON.stringify(props.formData)),
	(val: any, oldValue: any) => {
		if (JSON.stringify(val) == JSON.stringify(oldValue)) return
		val.map((item: any, index: number) => {
			if (item.values !== oldValue[index].values) {
				myValue.value[item.name] = item.values
			}
		})
	}
)

const form = ref()
const submit = () => {
	form.value
		.validate()
		.then((value: Object) => {
			//如果key是多字段，进行拆解拼装value
			for (const key in value) {
				if (key.indexOf(',') != -1) {
					let keyNames = key.split(',')
					keyNames.forEach((item, index) => {
						value[item] = isEmpty(value[key][index]) ? '' : value[key][index]
					})
					delete value[key]
				}
			}
			emit('submit', value)
		})
		.catch(err => {
			// console.log('表单错误信息：', err)
		})
}
</script>

<style lang="scss">
.form-wrap {
	padding-bottom: calc($bottom-bar-height + 30rpx);
	background-color: #ffffff;
}
.gutter-bottom {
	border-bottom: 16rpx solid #f7f7f7;
}
.forms-input-style {
	width: 100%;
	margin-left: -8px;
}
</style>
